<template>
    <div>
        <div class="commentbox">
             <h3 id="sa">45条评论</h3>
            <div class="comment">
                <div class="comment-user">
                   <span><img src="./user-img.jpg" width="100%"></span>
                   <dl>
                       <dt>元笙</dt>
                       <dd>5分钟前</dd>
                   </dl>
                </div>
                <div class="comment-dianzhan"  @click="like()">
                   <span class="iconfont" v-if="likeFill">&#xe69c;</span>
                   <span class="iconfont" v-else>&#xe69d;</span>
                   <a>256</a>
                </div>
              <div class="comment-text">
                  <p>可以在站酷建站里购买网站模板，然后绑定域名，要是自己会开发，就可以自己买个服务器然后设计开发网站，再绑定域名</p>
              </div>
            </div>
             <div class="comment">
                <div class="comment-user">
                   <span><img src="./user-img2.jpg" width="100%"></span>
                   <dl>
                       <dt>静的宅</dt>
                       <dd>1小时前</dd>
                   </dl>
                </div>
                <div class="comment-dianzhan">
                   <span class="iconfont">&#xe69c;</span><a>256</a>
                </div>
              <div class="comment-text">
                  <p>因为对爱情有期待 才让自己变成了单身狗</p>
              </div>
            </div>
             <div class="comment">
                <div class="comment-user">
                   <span><img src="./user-img3.jpg" width="100%"></span>
                   <dl>
                       <dt>飘fly</dt>
                       <dd>2小时前</dd>
                   </dl>
                </div>
                <div class="comment-dianzhan">
                   <span class="iconfont">&#xe69c;</span><a>256</a>
                </div>
              <div class="comment-text">
                  <p>看完刚好12:00，我酸了❤️</p>
              </div>
            </div>
             <div class="comment">
                <div class="comment-user">
                   <span><img src="./user-img4.jpg" width="100%"></span>
                   <dl>
                       <dt>小家伙来了</dt>
                       <dd>18小时前</dd>
                   </dl>
                </div>
                <div class="comment-dianzhan">
                   <span class="iconfont">&#xe69c;</span><a>256</a>
                </div>
              <div class="comment-text">
                  <p>年纪大了看什么都想哭</p>
              </div>
            </div>
             <div class="comment">
                <div class="comment-user">
                   <span><img src="./user-img5.jpg" width="100%"></span>
                   <dl>
                       <dt>Z78773538</dt>
                       <dd>19小时前</dd>
                   </dl>
                </div>
                <div class="comment-dianzhan">
                   <span class="iconfont">&#xe69c;</span><a>256</a>
                </div>
              <div class="comment-text">
                  <p>撒的发生的发的是的说法是</p>
              </div>
            </div>
             <div class="comment">
                <div class="comment-user">
                   <span><img src="./user-img6.jpg" width="100%"></span>
                   <dl>
                       <dt>Z52832296</dt>
                       <dd>21小时前</dd>
                   </dl>
                </div>
                <div class="comment-dianzhan">
                   <span class="iconfont">&#xe69c;</span><a>256</a>
                </div>
              <div class="comment-text">
                  <p>商业广告拍得没有这么商业，文案也写得很好，很好不出戏</p>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            likeFill:true
        }
    },
    methods:{
        like(el){
            this.likeFill = !this.likeFill
        }
    }
}
  
</script>
<style lang="scss" scoped>
    .commentbox{
        margin-top: 10px !important;
        background: #fff;
        padding-bottom: 40px;
        h3{
            padding: 10px 0;
            width: 90%;
            font-size: 1rem;
            color: #1e1e1e;
            font-weight: normal;
            margin: 0 auto !important;
        }
        .comment{
            width: 90%;
            margin: 0 auto !important;
            display: flex;
            justify-content: space-between;
            padding:15px 0;
            border-top: 1px solid #f3f3f3;
            flex-wrap: wrap;
            .comment-user{
                width:50%;
                display: flex;
                justify-content: flex-start;
                span{
                    width:2.5rem;
                    height: 2.5rem;;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px !important;
                   
                }
                dl{
                    dt{
                        font-size: .8rem;
                        color: #1e1e1e;
                    }
                      dd{
                        font-size: .3rem;
                        color: #999999;
                        padding-top: 5px;
                    }
                }
            }
            .comment-dianzhan{
                width: 20%;
                display: flex;
                justify-content:flex-end;
                align-content: center;
                align-items: center;
                span{
                    font-size: 1.5rem;
                    color: #999999; 
                    &:nth-of-type(2){
                      color: #fd5757;
                   }
                }
                
                a{
                        font-size: .8rem;
                        margin-bottom: 3px !important;
                        color: #999999;
                    }
            }
             .comment-text{
                 width: 100%;
                 color: #333333;
                 font-size: .5rem;
                 line-height: 1.5em;
                 padding-top: 20px;
             }
        }
    }
</style>
